<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图书馆座位查询系统</title>
    <style>
        .container { width: 95%; margin: 20px auto; }
        .filter-area { padding: 15px; border: 1px solid #eee; margin: 10px 0; border-radius: 4px; }
        .filter-item { margin-right: 20px; display: inline-block; margin-bottom: 10px; }
        .filter-item label { display: inline-block; width: 80px; text-align: right; margin-right: 5px; }
        .filter-item select, .filter-item input { padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px; }
        .btn-group { margin: 15px 0; }
        .btn {
            padding: 6px 16px; margin-right: 10px;
            cursor: pointer; border: none; border-radius: 4px;
            background: #409EFF; color: white; font-size: 14px;
        }
        .btn:hover { background: #66b1ff; }
        .btn:disabled { background: #ccc; cursor: not-allowed; }
        .btn-reset { background: #f56c6c; }
        .btn-reset:hover { background: #f88787; }
        .result-area { margin: 15px 0; padding: 15px; border: 1px solid #eee; border-radius: 4px; }
        .result-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333; }
        table { width: 100%; border-collapse: collapse; margin: 10px 0; }
        th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
        th { background: #f9f9f9; color: #666; }
        .status-0 { color: #67c23a; } /* 空闲 */
        .status-1 { color: #e6a23c; } /* 已预约 */
        .status-2 { color: #409EFF; } /* 使用中 */
        .status-3 { color: #f56c6c; } /* 维护中 */
        .pagination { margin: 15px 0; text-align: center; }
        .page-btn {
            display: inline-block; padding: 5px 12px; margin: 0 3px;
            border: 1px solid #ddd; border-radius: 3px; cursor: pointer;
        }
        .page-btn.active { background: #409EFF; color: white; border-color: #409EFF; }
        .page-btn:disabled { cursor: not-allowed; color: #999; background: #f5f5f5; }
        .user-info { margin-bottom: 15px; font-size: 14px; color: #666; }
    </style>
</head>
<body>
<div class="container">
    <!-- 用户信息 -->
    <div class="user-info">
        当前登录：<span id="username">未登录</span>（<span id="roleName">普通用户</span>）
    </div>

    <!-- 筛选条件区域 -->
    <div class="filter-area">
        <div class="filter-item">
            <label>座位区域：</label>
            <select id="areaFilter">
                <option value="">全部区域</option>
                <option value="A区">A区</option>
                <option value="B区">B区</option>
                <option value="C区">C区</option>
                <option value="演讲区">演讲区</option>
            </select>
        </div>
        <div class="filter-item">
            <label>座位状态：</label>
            <select id="statusFilter">
                <option value="">全部状态</option>
                <option value="0">空闲</option>
                <option value="1">已预约</option>
                <option value="2">使用中</option>
                <option value="3">维护中</option>
            </select>
        </div>
        <div class="filter-item">
            <label>是否带电源：</label>
            <select id="powerFilter">
                <option value="">不限</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <div class="filter-item">
            <label>是否靠窗：</label>
            <select id="windowFilter">
                <option value="">不限</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <div class="filter-item">
            <label>座位编号：</label>
            <input type="text" id="seatNoFilter" placeholder="模糊查询，如A01">
        </div>
        <div class="filter-item">
            <label>每页条数：</label>
            <select id="pageSizeFilter">
                <option value="5">5条/页</option>
                <option value="10" selected>10条/页</option>
                <option value="20">20条/页</option>
            </select>
        </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="btn-group">
        <button class="btn" onclick="querySeats('ordinary')">查询普通座位</button>
        <button class="btn" onclick="querySeats('lecture')">查询演讲室座位</button>
        <button class="btn" onclick="querySeats('all')" id="adminQueryBtn" style="display: none;">查询所有座位（管理员）</button>
        <button class="btn btn-reset" onclick="resetFilter()">重置筛选条件</button>
    </div>

    <!-- 结果展示区域 -->
    <div class="result-area">
        <div class="result-title" id="resultTitle">请选择筛选条件并点击查询</div>
        <div id="resultTable">暂无数据</div>
        <!-- 分页控件 -->
        <div class="pagination" id="pagination"></div>
    </div>
</div>

<script>
    // 全局查询状态：存储当前查询的关键信息（确保翻页和查询逻辑正确）
    const queryState = {
        seatType: 'ordinary', // 当前查询的座位类型：ordinary(普通)/lecture(演讲室)/all(所有)
        uuid: '',             // 缓存标识：翻页时必带，新查询时清空
        pageNum: 1,           // 当前页码：新查询默认1，翻页时更新
        pageSize: 10          // 每页条数：默认10，用户切换时更新
    };

    // 页面加载完成后初始化
    window.onload = function() {
        // 1. 初始化用户信息（从localStorage获取登录状态）
        initUserInfo();
        // 2. 初始化每页条数（默认10，与下拉框同步）
        queryState.pageSize = parseInt(document.getElementById('pageSizeFilter').value);
        // 3. 监听每页条数变化（用户切换时更新全局状态）
        document.getElementById('pageSizeFilter').addEventListener('change', function() {
            queryState.pageSize = parseInt(this.value);
            // 切换页大小时，重置为第1页并重新查询（用当前条件）
            queryState.pageNum = 1;
            queryCurrentCondition();
        });
    };

    /**
     * 初始化用户信息（区分普通用户和管理员）
     */
    function initUserInfo() {
        const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {};
        const username = userInfo.username || '未登录';
        const roleName = userInfo.roleName || '普通用户';
        document.getElementById('username').textContent = username;
        document.getElementById('roleName').textContent = roleName;
        // 管理员显示"查询所有座位"按钮
        if (roleName === '管理员') {
            document.getElementById('adminQueryBtn').style.display = 'inline-block';
        }
    }

    /**
     * 发起座位查询（核心函数）
     * @param {string} seatType - 座位类型：ordinary/lecture/all
     */
    function querySeats(seatType) {
        // 1. 新查询：重置关键状态（清空uuid，页码设为1，更新座位类型）
        queryState.seatType = seatType;
        queryState.uuid = ''; // 新查询必清空uuid！！！
        queryState.pageNum = 1; // 新查询默认第1页
        // 2. 执行当前条件的查询
        queryCurrentCondition();
    }

    /**
     * 按当前筛选条件发起查询（复用函数：新查询、翻页、切换页大小时调用）
     */
    function queryCurrentCondition() {
        // 1. 收集当前筛选条件（从页面获取）
        const queryParams = collectFilterParams();
        // 2. 拼接请求URL（根据座位类型区分接口）
        const requestUrl = getRequestUrlBySeatType(queryState.seatType);
        // 3. 检查登录状态（无Token则提示登录）
        const token = localStorage.getItem('token');
        if (!token) {
            alert('请先登录系统！');
            return;
        }

        // 4. 发送GET请求（带查询参数和Token）
        fetch(buildQueryUrl(requestUrl, queryParams), {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`, // JWT权限校验
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                // 处理HTTP错误（如401未授权、500服务器错误）
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}（${response.statusText}）`);
                }
                return response.json();
            })
            .then(result => {
                // 处理业务错误（如权限不足、参数错误）
                if (result.code !== 200) {
                    alert(`查询失败：${result.msg}`);
                    return;
                }
                // 业务成功：渲染结果和分页
                renderResult(result.data);
            })
            .catch(error => {
                // 捕获网络错误或其他异常
                alert(`网络异常：${error.message}`);
                console.error('查询错误详情：', error);
            });
    }

    /**
     * 收集当前页面的筛选条件（区域、状态、电源、靠窗、座位编号）
     * @returns {object} 筛选条件对象
     */
    function collectFilterParams() {
        return {
            area: document.getElementById('areaFilter').value || '',
            status: document.getElementById('statusFilter').value || '',
            hasPower: document.getElementById('powerFilter').value || '',
            isWindow: document.getElementById('windowFilter').value || '',
            seatNo: document.getElementById('seatNoFilter').value || '',
            uuid: queryState.uuid, // 翻页时带，新查询时为空
            pageNum: queryState.pageNum,
            pageSize: queryState.pageSize
        };
    }

    /**
     * 根据座位类型获取请求URL
     * @param {string} seatType - 座位类型
     * @returns {string} 请求接口URL
     */
    function getRequestUrlBySeatType(seatType) {
        switch(seatType) {
            case 'ordinary':
                return '/seat/ordinary/list'; // 普通座位接口
            case 'lecture':
                return '/seat/lecture/list';  // 演讲室座位接口
            case 'all':
                return '/admin/seat/list';    // 管理员查询所有座位接口
            default:
                return '/seat/ordinary/list';
        }
    }

    /**
     * 构建带查询参数的URL（将对象转为?key=value&key=value格式）
     * @param {string} baseUrl - 基础URL
     * @param {object} params - 查询参数对象
     * @returns {string} 带参数的完整URL
     */
    function buildQueryUrl(baseUrl, params) {
        const queryStr = Object.entries(params)
            .filter(([key, value]) => value !== '' && value !== null && value !== undefined)
            .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
            .join('&');
        return queryStr ? `${baseUrl}?${queryStr}` : baseUrl;
    }

    /**
     * 渲染查询结果（表格+分页）
     * @param {object} pageResult - 后端返回的分页结果
     */
    function renderResult(pageResult) {
        // 1. 更新全局uuid（后端返回的缓存标识，翻页时要用）
        if (pageResult.uuid) {
            queryState.uuid = pageResult.uuid;
        }
        // 2. 渲染结果标题（显示查询条件和统计信息）
        renderResultTitle(pageResult);
        // 3. 渲染座位表格
        renderSeatTable(pageResult.list);
        // 4. 渲染分页控件
        renderPagination(pageResult);
    }

    /**
     * 渲染结果标题（显示当前查询条件和数据统计）
     * @param {object} pageResult - 分页结果
     */
    function renderResultTitle(pageResult) {
        const seatTypeText = {
            'ordinary': '普通座位',
            'lecture': '演讲室座位',
            'all': '所有座位'
        }[queryState.seatType];
        const total = pageResult.total || 0;
        const pages = pageResult.pages || 0;
        const title = `${seatTypeText}查询结果（共${total}条数据，共${pages}页，当前第${queryState.pageNum}页）`;
        document.getElementById('resultTitle').textContent = title;
    }

    /**
     * 渲染座位表格
     * @param {array} seatList - 座位列表数据
     */
    function renderSeatTable(seatList) {
        if (!seatList || seatList.length === 0) {
            document.getElementById('resultTable').innerHTML = '<div style="text-align:center; color:#999; padding:20px;">暂无符合条件的座位</div>';
            return;
        }
        // 拼接表格HTML
        let tableHtml = `
                <table>
                    <thead>
                        <tr>
                            <th>座位编号</th>
                            <th>所在区域</th>
                            <th>座位类型</th>
                            <th>当前状态</th>
                            <th>是否带电源</th>
                            <th>是否靠窗</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
        // 循环渲染每一行座位数据
        seatList.forEach(seat => {
            const typeText = seat.type === 'ORDINARY' ? '普通座位' : '演讲室座位';
            const statusText = getStatusText(seat.status);
            const statusClass = `status-${seat.status}`;
            const hasPowerText = seat.hasPower === 1 ? '是' : '否';
            const isWindowText = seat.isWindow === 1 ? '是' : '否';
            tableHtml += `
                    <tr>
                        <td>${seat.seatNo}</td>
                        <td>${seat.area}</td>
                        <td>${typeText}</td>
                        <td class="${statusClass}">${statusText}</td>
                        <td>${hasPowerText}</td>
                        <td>${isWindowText}</td>
                    </tr>
                `;
        });
        tableHtml += `</tbody></table>`;
        document.getElementById('resultTable').innerHTML = tableHtml;
    }

    /**
     * 渲染分页控件（上一页、页码、下一页）
     * @param {object} pageResult - 分页结果（含total、pages）
     */
    function renderPagination(pageResult) {
        const total = pageResult.total || 0;
        const pages = pageResult.pages || 0;
        const currentPage = queryState.pageNum;
        let paginationHtml = '';

        // 1. 上一页按钮（当前页1时禁用）
        paginationHtml += `<span class="page-btn" onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>上一页</span>`;

        // 2. 页码按钮（简化逻辑：显示首页、当前页附近、末页，避免过多页码）
        if (pages <= 5) {
            // 总页数<=5：显示所有页码
            for (let i = 1; i <= pages; i++) {
                paginationHtml += `<span class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</span>`;
            }
        } else {
            // 总页数>5：显示首页、当前页前1页、当前页、当前页后1页、末页
            paginationHtml += `<span class="page-btn ${1 === currentPage ? 'active' : ''}" onclick="changePage(1)">1</span>`;
            // 显示"..."（当前页>3时）
            if (currentPage > 3) {
                paginationHtml += `<span class="page-btn" disabled>...</span>`;
            }
            // 显示当前页附近的页码（前1页、当前页、后1页）
            const startPage = Math.max(2, currentPage - 1);
            const endPage = Math.min(pages - 1, currentPage + 1);
            for (let i = startPage; i <= endPage; i++) {
                paginationHtml += `<span class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</span>`;
            }
            // 显示"..."（当前页<总页数-2时）
            if (currentPage < pages - 2) {
                paginationHtml += `<span class="page-btn" disabled>...</span>`;
            }
            // 显示末页
            paginationHtml += `<span class="page-btn ${pages === currentPage ? 'active' : ''}" onclick="changePage(${pages})">${pages}</span>`;
        }

        // 3. 下一页按钮（当前页=总页数时禁用）
        paginationHtml += `<span class="page-btn" onclick="changePage(${currentPage + 1})" ${currentPage === pages ? 'disabled' : ''}>下一页</span>`;

        // 4. 渲染到页面
        document.getElementById('pagination').innerHTML = paginationHtml;
    }

    /**
     * 切换页码（翻页核心函数）
     * @param {number} targetPage - 目标页码
     */
    function changePage(targetPage) {
        // 1. 校验目标页码（不能小于1，不能大于总页数）
        const pages = document.getElementById('resultTitle').match(/共(\d+)页/)?.[1] || 0;
        if (targetPage < 1 || targetPage > parseInt(pages)) {
            return; // 无效页码，不执行
        }
        // 2. 更新当前页码并发起查询（翻页必带uuid！！！）
        queryState.pageNum = targetPage;
        queryCurrentCondition();
    }

    /**
     * 重置筛选条件（清空所有选择和输入，恢复默认状态）
     */
    function resetFilter() {
        // 1. 清空筛选条件的UI
        document.getElementById('areaFilter').value = '';
        document.getElementById('statusFilter').value = '';
        document.getElementById('powerFilter').value = '';
        document.getElementById('windowFilter').value = '';
        document.getElementById('seatNoFilter').value = '';
        // 2. 重置全局查询状态（页码1，页大小10，清空uuid）
        queryState.pageNum = 1;
        queryState.pageSize = 10;
        queryState.uuid = '';
        // 3. 同步每页条数的下拉框（恢复默认10）
        document.getElementById('pageSizeFilter').value = 10;
        // 4. 清空结果区域
        document.getElementById('resultTitle').textContent = '请选择筛选条件并点击查询';
        document.getElementById('resultTable').innerHTML = '暂无数据';
        document.getElementById('pagination').innerHTML = '';
    }

    /**
     * 根据状态码获取座位状态文本
     * @param {number} status - 状态码：0-空闲，1-已预约，2-使用中，3-维护中
     * @returns {string} 状态文本
     */
    function getStatusText(status) {
        const statusMap = {
            0: '空闲',
            1: '已预约',
            2: '使用中',
            3: '维护中'
        };
        return statusMap[status] || '未知状态';
    }

    /**
     * 构建带参数的请求URL（工具函数）
     * @param {string} baseUrl - 基础URL
     * @param {object} params - 参数对象
     * @returns {string} 带参数的URL
     */
    function buildQueryUrl(baseUrl, params) {
        const queryParams = new URLSearchParams();
        // 遍历参数，只添加非空值
        Object.entries(params).forEach(([key, value]) => {
            if (value !== '' && value !== null && value !== undefined) {
                queryParams.append(key, value);
            }
        });
        const queryStr = queryParams.toString();
        return queryStr ? `${baseUrl}?${queryStr}` : baseUrl;
    }
</script>
</body>
</html>